<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@page isELIgnored="false" %>
<%@ include file="/WEB-INF/views/common/includes.jsp" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title><fmt:message key="event.website.title"/></title>
		<link href="<c:url value='/static/css/estilo_efqm.css'/>" rel="stylesheet" type="text/css" />
		<link href="<c:url value='/static/css/ui.tabs.css'/>" rel="stylesheet" type="text/css" />
				<style type='text/css'>
    #mask{ 
        position:absolute; /* important */
        top:0px; /* start from top */
        left:0px; /* start from left */
        height:100%; /* cover the whole page */
        width:100%;  /* cover the whole page */
        display:none; /* don't show it '*/  
        /* styling bellow */
        background-color: black;
        z-index:5000;
    }
    
    .modal_window{
        position:absolute; /* important so we can position it on center later */
        display:none; /* don't show it */   
        /* styling bellow */
        color:white;
    }
    
    /* style a specific modal window  */
    #modal_window{
        padding:50px;
       	background-color:#000;
        color:black;
        background:url(/static/img/interfaz/loading.gif) no-repeat;
        z-index:5001;
    }
    
</style>
		<script type="text/javascript" src="<c:url value='/static/js/google_analytics_inc.js'/>"></script>
		<script type="text/javascript" src="<c:url value='/static/js/swfobject.js'/>"></script>
		<script type="text/javascript" src="<c:url value='/static/js/jquery-1.4.min.js'/>"></script>
		<script type="text/javascript" src="<c:url value='/static/js/json.min.js'/>"></script>
		<script type="text/javascript" src="<c:url value='/static/js/ui.core.js'/>"></script>
		<script type="text/javascript" src="<c:url value='/static/js/ui.tabs.js'/>"></script>
		<script type="text/javascript">
			$(document).ready(function(){
		    
		    //get the height and width of the page
		    var window_width = $(window).width();
		    var window_height = $(window).height();
		    
		    //vertical and horizontal centering of modal window(s)
		    /*we will use each function so if we have more then 1 
		    modal window we center them all*/
		    $('.modal_window').each(function(){
		        
		        //get the height and width of the modal
		        var modal_height = $(this).outerHeight();
		        var modal_width = $(this).outerWidth();
		        
		        //calculate top and left offset needed for centering
		        var top = (window_height-modal_height)/2;
		        var left = (window_width-modal_width)/2;
		        
		        //apply new top and left css values 
		        $(this).css({'top' : top , 'left' : left});
		        
		    });

		    	$('#project-summary-form').submit(function() {
		    	 	show_modal('modal_window');
		    	});

		    	$('#video-form').submit(function() {
		    	 	show_modal('modal_window');
		    	});
		        
		    });
		    
		    //THE FUNCTIONS
		    
		    function close_modal(){
		        
		        //hide the mask
		        $('#mask').fadeOut(500);
		        
		        //hide modal window(s)
		        $('.modal_window').fadeOut(500);
		        
		    }
		    function show_modal(modal_id){
		    	 //get the height and width of the modal
		    	var window_width = $(window).width();
		    	var window_height = $(window).height();
		       
		        //set display to block and opacity to 0 so we can use fadeTo
		        var w = window_width  + "px";
		        var h = (window_height + 115) + "px";
		       
		        $('#mask').css({ 'display' : 'block', opacity : 0, height:h, width:w});
		        
		        //fade in the mask to opacity 0.8 
		        $('#mask').fadeTo(500,0.8);
		         
		         //show the modal window
		        $('#'+modal_id).fadeIn(500);
		        
		    }
		</script>
		
		
  	</head>
  	
	<body id="efqm">
	 
	 <div id='mask' class='close_modal'></div>
     <div id='modal_window' class='modal_window'></div>
     
     
	<div id="global" class="fondo_practices">
		
		<%@ include file="/WEB-INF/views/common/header.jsp" %>
		
		<div id="efqm_content"> 
			<h3 class="upload_practices">
				<fmt:message key="event.website.target"/>
			</h3>	
			<div id="conten_central">
				<div class="columna_left">
						<h4><fmt:message key="company.dataManage.title"/></h4>
				</div>
				<div class="conten_gen_central">
					<p class="entradilla"><fmt:message key="company.dataManage.entradilla.1"/></p>
					 	 <div id="container-1">
            <ul>
                <li><a href="#fragment-1"><span><fmt:message key="company.dataManage.fragment.data.title"/></span></a></li>
                <li><a href="#fragment-2"><span><fmt:message key="company.dataManage.fragment.goodpractice.title"/></span></a></li>
                <li><a href="#fragment-3"><span><fmt:message key="company.dataManage.fragment.video.title"/></span></a></li>
            </ul>
            
            <div id="fragment-1">
            <form:form commandName="company" method="post">
		  	
					<form:label	for="name" path="companyInfo.name" cssErrorClass="error"><fmt:message key="company.data.name"/></form:label><br/>
					<form:input path="companyInfo.name" /> <form:errors path="companyInfo.name" />			
			
					<form:label for="country" path="companyInfo.country" cssErrorClass="error"><fmt:message key="company.data.country"/></form:label><br/>
					<form:input path="companyInfo.country" /> <form:errors path="companyInfo.country" />
					
					<form:label for="city" path="companyInfo.city" cssErrorClass="error"><fmt:message key="company.data.city"/></form:label><br/>
					<form:input path="companyInfo.city" /> <form:errors path="companyInfo.city" />
					
					<form:label for="street" path="companyInfo.street" cssErrorClass="error"><fmt:message key="company.data.street"/></form:label><br/>
					<form:input path="companyInfo.street" /> <form:errors path="companyInfo.street" />
					
					<form:label for="zip" path="companyInfo.zip" cssErrorClass="error"><fmt:message key="company.data.zip"/></form:label><br/>
					<form:input path="companyInfo.zip" /> <form:errors path="companyInfo.zip" />
					
					<form:label for="telephone" path="companyInfo.telephone" cssErrorClass="error"><fmt:message key="company.data.telephone"/></form:label><br/>
					<form:input path="companyInfo.telephone" /> <form:errors path="companyInfo.telephone" />
				
					<form:label for="email" path="companyInfo.email" cssErrorClass="error"><fmt:message key="company.data.contact.email"/></form:label><br/>
					<form:input path="companyInfo.email" /> <form:errors path="companyInfo.email" />
				
					<form:label for="contactPerson" path="companyInfo.contactPerson" cssErrorClass="error"><fmt:message key="company.data.contact.person"/></form:label><br/>
					<form:input path="companyInfo.contactPerson" /> <form:errors path="companyInfo.contactPerson" />
					
					
					<form:label for="sicCode" path="companyInfo.sicCode" cssErrorClass="error"><fmt:message key="company.data.activity.sector"/></form:label><br/>
					<form:select path="companyInfo.sicCode"><form:errors path="companyInfo.sicCode"/>
              			<option value="">-- <fmt:message key="action.generic.select.one"/></option>
              			<c:forEach items="${sicCodes}" var="sicCode">
              			
              				<c:choose>
              					<c:when test="${company.companyInfo.sicCode == sicCode.code}">
              						<option value="${sicCode.code}" selected="selected"><fmt:message key="${sicCode.descriptionCode}"/></option>
              					</c:when>
              					<c:otherwise>
              						<option value="${sicCode.code}"><fmt:message key="${sicCode.descriptionCode}"/></option>
              					</c:otherwise>
              				</c:choose>
              				
              			</c:forEach>
          			</form:select>
					
					<form:hidden path="id"/>
					<form:hidden path="validated"/>
					<form:hidden path="preselected"/>
					<form:hidden path="participantInfo.email"/>
					<form:hidden path="participantInfo.password"/>
					
					<input type="submit" value='<fmt:message key="action.company.data.send"/>' title='<fmt:message key="action.company.data.send"/>' class="bt_standar"/>
				
		</form:form>
		
            
								
			</div>
			
			<div id="fragment-2">
				
				<form:form commandName="additionalInformation" method="post" action="/company/add-information">
					<form:label	for="title" path="title" cssErrorClass="error">
						<fmt:message key="company.dataManage.bestpractice.title"/>
					</form:label><br/>
					<form:input path="title" /> <form:errors path="title" />
					<form:label	for="information" path="information" cssErrorClass="error">
						<fmt:message key="company.dataManage.bestpractice.description"/>
					</form:label><br/>
					<form:textarea path="information" rows="3" cols="20" /><form:errors path="information"/>
					
					<form:label for="innovationTypeCodes" path="innovationTypeCodes" cssErrorClass="error">
						<fmt:message key="company.dataManage.innovation.type.selection.process"/>
					</form:label><br/>
					
					<form:select path="innovationTypeCodes"><form:errors path="innovationTypeCodes" />
              			<c:forEach items="${types}" var="type">						
								<c:set var="selected" value=""/>
								<c:forEach items="${company.additionalInformation.innovationTypeCodes}" var="typeCode">
									<c:if test="${typeCode == type.code}">
										<c:set var="selected" value="selected"/>	
									</c:if>
								</c:forEach>        					
              					<option value="${type.code}" ${selected}><fmt:message key="${type.titleCode}"/></option>
              			</c:forEach>
              			<input type="submit" value='<fmt:message key="action.company.data.send"/>' title='<fmt:message key="action.company.data.send"/>' class="bt_standar"/>
          			</form:select>
          			
				</form:form>
				                 
                <br/><br/><br/><br/><br/>
                <ul class="uploaded_files">
                	
                	<li>
						<a href="<c:url value='/company/download-sheet'/>" title='<fmt:message key="action.company.goodpractice.summary.download"/>'>
										<fmt:message key="action.company.goodpractice.summary.download"/>
						</a>
						
					</li>
					
					
                </ul>
                	<fmt:message key="company.dataManage.project.summary.upload.instructions"/>
                
						<form id="project-summary-form" name="project-summary-form" method="POST" enctype="multipart/form-data" action="<c:url value='/company/upload-sheet'/>">
							<input id="file" type="file" size="45" name="file" class="input">
							<input type="submit" value="<fmt:message key='action.generic.data.send'/>" title="<fmt:message key='action.generic.data.send'/>" class="bt_standar"/>
						</form>
                
			</div>
			
            <div id="fragment-3">
  				 
  				
            	<c:choose>
            	 
					<c:when test="${!empty company.videos}">
						<c:set var="video" value="${company.videos[0]}"/>
							<ul class="uploaded_files">
								<li>	
									
									<a href="<c:url value='/company/refresh-video'/>" title="<fmt:message key='action.company.video.refresh'/>">
										<span><fmt:message key="action.company.video.refresh"/></span>
									</a>	
								</li>
								<li><fmt:message key="video.data.duration"/>: ${video.duration} <fmt:message key="video.data.duration.measurement.unit"/></li>
								<li><fmt:message key="video.data.uploaded.data"/>: ${video.uploaded}</li>
							</ul>
							<c:choose>
							<c:when test="${video.available}">
								<div id="ytapiplayer">
    								<fmt:message key="flashplayer.advice"/>
  								</div>
								<script type="text/javascript">
    								var params = { allowFullScreen : "true" , allowScriptAccess: "always" , wmode : "transparent" };
    								var atts = { id: "myytplayer" , allowfullscreen : "true"};
    								swfobject.embedSWF("http://www.youtube.com/v/${video.youTubeId}&enablejsapi=0&playerapiid=ytplayer&egm=0&fs=1&rel=0&color1=0xe1600f&color2=0xfebd01&border=1", 
                       					"ytapiplayer", "425", "344", "8", null, null, params, atts);
				  				</script>
				  				
							</c:when>
							<c:otherwise>
								<ul class="uploaded_files">
									<li>		
										<fmt:message key="video.not.available.reason.included"/>:
										<b>${video.reason}</b>
									</li>
									<li>		
										 <fmt:message key="video.not.available.user.can.do"/>
									</li>
									<li>		
										<fmt:message key="user.thanks"/>
									</li>
								</ul>
							</c:otherwise>
							</c:choose>
							
							<ul class="uploaded_files">
				  					<a href="<c:url value='/company/video-delete/${video.key.parent.id}'/>" class="bt_delete" title="<fmt:message key="action.company.video.delete"/>">
										<span><fmt:message key="action.company.video.delete"/></span>
									</a>
				  			</ul>
									  		
					</c:when>
					
					<c:otherwise>
						
						 <form id="video-form" action="${uploadInfo.url}?nexturl=<c:url value='http://${pageContext.request.serverName}:${pageContext.request.serverPort}/company/add-video/${company.id}'/>" method ="post" enctype="multipart/form-data" style="overflow:hidden; height:100%;">
							<label for="file"><fmt:message key="company.dataManage.videoupload.label"/></label>
							<input type="file" name="file"/>
							<p class="dato_lenght">- <fmt:message key="video.maxduration.advice"/></p>
							<input type="hidden" name="token" value="${uploadInfo.token}"/>
							<input type="hidden" name="companyId" value="${company.id}"/>
							<input type="submit" value='<fmt:message key="action.company.video.upload"/>' class="bt_standar"/>
						 </form>
						
  					</c:otherwise>
  					 
				</c:choose>	
				
                 
			
			</div>
            
            
        </div>
			</div>
			</div>
	<%@ include file="/WEB-INF/views/common/footer.jsp" %>
	</div>
	</div>
	</body>
</html>
